<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/liaotian/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/liaotian/app.css" />
    <link rel="stylesheet" type="text/css" href="../../css/liaotian/main.css" />
    <link rel="stylesheet" type="text/css" href="../../css/liaotian/reset.css" />
    <link rel="stylesheet" type="text/css" href="../../css/news.css">
    <link rel="stylesheet" type="text/css" href="../../css/liaotian1.css">
    <style>
        .find-man {
            color: #2196f3 !important;
        }

        /* @我的 */
        .findme {
            position: fixed;
            right: 0px;
            bottom: 50vh;
            background: #fff;
            border-radius: 15px 0 0 15px;
            padding: 5px 10px;
            z-index: 1;
        }

        .findme .num {
            position: absolute;
            left: 10px;
            top: -10px;
            background: red;
            color: #fff;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            text-align: center;
            line-height: 20px;
        }
    </style>
</head>

<body>
    <div id="view" v-cloak>
        <!-- 聊天列表 -->
        <div class="mui-content">
            <div class="loadmore" v-if="loadmore==1"></div>
            <div id="msg-list">
                <div class="msg-wrap" v-for="(item, index) in ffList" :id="'id'+item.id">
                    <div class="time" v-if="item.showtime"><span>{{item.time}}</span></div>
                    <div class="recall" v-if="item['status'] == 3"><span>该消息已被撤回</span></div>
                    <div v-else>
                        <li :class="{'msg-item-self':item.self==1, 'red-envelope':item.type==5||item.type==7, 'money':item.type==7, 'read-burn':Number(item.is_burn)!=0, 'msg-area':item.type==6}" class="msg-item">
                            <div class="msg-user">
                                <img class="msg-user-tx" @click="goUserInfo(item.userid, item.name);" :id="item.userid" :src="returnImg(item.head_portrait)" onerror="this.src='../../image/touxiang.png'" />
                                <img :src="returnImg(item.noble_circle)" v-if="item.noble_circle && item.is_noble && !ios" class="tx_cover" alt="">
                                <!-- <img src="../../image/test/icon_gold_medal_bg.png" class="tx_cover" alt=""> -->
                            </div>
                            <div class="msg-container">
                                <div class="name-wrap flex">
                                    <p class="user-name">{{item.name}}</p>
                                    <div class="tag-wrap flex-c">
                                        <span class="boy-tag" :class="{'girl-tag':item.sex == '女'}">{{item.age}}</span>
                                        <img class="new-noble" v-if="item.noble_icon && item.is_noble && !ios" :src="returnImg(item.noble_icon)" onerror="this.src='../../image/error-img.png'" alt="">
                                        <!-- <img class="new-noble" src="../../image/test/vip.png" onerror="this.src='../../image/error-img.png'" alt=""> -->
                                    </div>
                                </div>
                                <div class="msg-content" @touchstart="touchstartF(index);" @touchend="touchendF(index);">
                                    <div class="msg-content-inner" style="word-break: break-word;">
                                        <div v-if="item.type==0" v-html="getMesge(item.content)"></div>
                                        <div v-else-if="item.type==1">
                                            <img v-if="Number(item.is_burn)==0" @click.stop @click="_url({imgArr:[item.content], iIndex:0}, 'frame1/dy_img_win')" class="msg-content-image load" :src="returnImg(item.content)" onerror="this.src='../../image/error-img.png'" style="max-width: 100px;" />
                                            <div v-else @click="openBurn(index)" class="burn-msg" :class="{'burn':item.is_burn==-1}"></div>
                                        </div>
                                        <div v-else-if="item.type==2" @click.stop @click="audioPlay(index)">
                                            <span class="play-state" style="margin-top:3px;">
                                                <span class="audio" :class="{'aplaying':audio.id==item.id && audio.play==1}"></span>
                                            </span>
                                        </div>
                                        <div v-else-if="item.type==3" class="msg-video" @click="openVideo(index)">
                                            <img :src="returnImg(item.data.cover)" onerror="this.src='../../image/error-img.png'" alt="">
                                            <!-- <img src="../../image/shop/01.jpg" alt=""> -->
                                            <i class="video-icon"></i>
                                        </div>
                                        <div class="red-wrap" @click.stop @click="openRed(index)" v-else-if="item.type==5||item.type==7">
                                            <div class="red-img" :class="{'red-img-no':item.state==1}"></div>
                                            <div class="game">
                                                <p class="red-game-text">{{item.content}}</p>
                                                <p class="red-game" v-if="item.state==0">等待领取</p>
                                                <p class="red-game" v-else-if="item.state==1">已领取</p>
                                                <p class="red-game" v-else-if="item.state==2">已过期</p>
                                            </div>
                                        </div>
                                        <div class="msg-video" v-else-if="item.type==6" @click="openArea(index)">
                                            <img src="../../image/icon/nim_location_bk.png" alt="">
                                        </div>
                                        <div class="gift-wrap" v-if="item.type==8">
                                            <img class="g-img" :src="returnImg(item.data.cover)" onerror="this.src='../../image/error-img.png'" alt="">
                                            <div class="g-content">
                                                <h3 @click.stop="goUserInfo(item.data.to_user, item.data.to_user_name);">送给{{item.data.to_user_name}}</h3>
                                                <p>{{item.data.name}}x{{item.data.num}}</p>
                                                <!-- <span class="price"><i class="jinbi-icon"></i>{{item.data.money}}金币</span> -->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="msg-content-arrow"></div>
                                </div>
                            </div>
                            <div class="timeSec">
                                <div v-if="item.self == 1" style="line-height:50px;float:right;font-size:14px;color:#999;">
                                    <span v-if="item.type==2">{{item.second}}s"</span>
                                </div>
                                <div v-else style="line-height:50px;font-size:14px;color:#999;">
                                    <span v-if="item.type==2">{{item.second}}s"</span>
                                </div>
                            </div>
                            <div class="mui-item-clear"></div>
                        </li>
                    </div>
                </div>
                <div id="msg-bottom"></div>
            </div>
        </div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/emotion.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/qunliao.js"></script>
<script src="../../script/uibutton.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../json/qunliao.js"></script>
<script type="text/javascript" charset="utf-8">
    heigutgao = 1; // 默认允许加载
    pagenum = 1;
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ios: 1, // 1上架 0非上架
            ffList: [], // 消息列表
            ffInfo: {},

            userid: 0,
            touserid: 0,

            qunType: 0,
            emotionArr: emotionUrl,

            isResume: 1, // 是否切换为前台
            loadmore: 0, // 1加载中 0隐藏
            panelHeight: 0, // 面板高度
            inputBarHeight: 0, // 输入框高度
            panStatus: 0, // 面板是否有开启
            panNum: { // 统计次数
                input: 0, // 面板高度变化的次数
                ext: 0, // 控件面板是第几次打开
                emo: 0, // 表情面板是第几次打开
            },
            nowH: 0, // 当前列表的高度

            frameH: 0, // frame 原始高度
        },
        methods: {
            touchstartF(index) {
                // var e = event.currentTarget;
                touchstartF(index);
            },
            touchendF(index) {
                // var e = event.currentTarget;
                touchendF(index);
            },
            getMesge(s) {
                return getMesge(s);
            },
            _url(param, url) {
                _url(param, url);
            },
            showDetail(url, data, topH, footerH) {
                showDetail(url, data, topH, footerH)
            },

            // 跳转 查看用户详情
            goUserInfo(id, name) {
                go_userInfo(id, name)
            },

            // 图片
            returnImg(url) {
                return returnImg(url);
            },
        }
    })
    apiready = function() {
        view.frameH = api.frameHeight;
        view.ios = $api.getStorage('shang');
        view.userid = $api.getStorage('userid');
        view.touserid = api.pageParam['touserid'];
        view.qunType = api.pageParam['qunType'];
        view.panelHeight = api.safeArea.bottom;

        // 加载消息列表
        getMsgList(1);

    }

    setTimeout(function() {
        $('#msg-list').scroll(function() {
            var $msg = $('#msg-list');
            var liaoH = $msg[0].scrollHeight; // 实际高度
            var viewH = $msg.height(); // 显示的高度
            var toTop = $msg.scrollTop(); // 滚动条移动的距离
            if (toTop < 20) {
                if (heigutgao == 1) {
                    pagenum++;
                    getMsgList(pagenum);
                }
            }
        })
    }, 1000)

    // 加载上一页
    function getMsgList(page) {

        view.loadmore = 1;
        view.nowH = $('#msg-list').height();

        _ajax('api/cluster/getMsgList', function(ret, err) {
            _send('clearFindMe');
            console.log(JSON.stringify(ret))
            console.log(JSON.stringify(err))
            if (ret.code == 200) {
                view.ffList = ret.data.concat(view.ffList);
            } else if (ret.code == 201) {
                heigutgao = 0;
            }
            view.loadmore = 0;
            if (page == 1) {
                setTimeout(function() {
                    goBottom();
                }, 400)
            }
        }, {
            user_id: view.userid,
            cluster_id: view.touserid,
            page: page,
            relate: 1
        })
    }
</script>

</html>